(defpackage :page-components
  (:use :cl)
  (:export
   ))

(in-package :page-components)


(defun define-header ()
  (spinneret:with-html
    (:meta :charset "utf-8")
    (:meta :name "viewport" :content "width=device-width, initial-scale=1")
    (:meta :http-equiv "content-type" :content "text/html; charset=UTF-8")
    (:meta :http-equiv "Cache-Control" :content "no-cache, no-store, must-revalidate")
    (:meta :name "description" :content "daisyUI examples in Common Lisp")
    (:script (:raw
              "try {
    document.documentElement.setAttribute('data-theme', localStorage.getItem('theme'))
    } catch (e) { }"))
    ;;(:script :src "https://cdn.tailwindcss.com")
    ;;(:link :href "https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css" :rel "stylesheet" :type "text/css")
    (:script :src "https://unpkg.com/htmx.org@2.0.2" :integrity "sha384-Y7hw+L/jvKeWIRRkqWYfPcvVxHzVzn5REgzbawhxAuQGwX1XWe70vji+VSeHOThJ" :crossorigin "anonymous")
    (:link :href "/static/output.css" :rel "stylesheet" :type "text/css")
    (:title "CL for daisyUI")
    ))


(defun define-right-navbar ()
  (spinneret:with-html
    (:div :class "bg-base-100 text-base-content sticky top-0 z-30 flex h-16 w-full justify-center bg-opacity-90 backdrop-blur transition-shadow duration-100 [transform:translate3d(0,0,0)]"
          (:nav :class "navbar w-full"
                (:div :class "flex flex-1 md:gap-1 lg:gap-2"
                      ;; Hamburger menu
                      (:span :class "tooltip tooltip-bottom before:text-xs before:content-[attr(data-tip)]" :data-tip "Menu"
                             (:label :aria-label "Open menu" :for "drawer" :class "btn btn-square btn-ghost drawer-button lg:hidden" "☰"))
                      ;; left components in the leftside of the navbar
                      )
                ;; right components in the rightside of the navbar
                (:div :class "flex-0"
                      ;; buttons, hidden in small screens
                      (:div :class "hidden flex-none items-center lg:block"
                            (:a :class "btn btn-ghost drawer-button font-normal" :href "/components" "Components"))
                      (:div :class "hidden flex-none items-center lg:block"
                            (:a :class "btn btn-ghost drawer-button font-normal" :href "/store" "Store"))
                      ;; not hidden but change style in small screens
                      (:div :title "Change Language" :class "dropdown dropdown-end"
                            (:div :tabindex "0" :role "button" :class "btn btn-ghost" :aria-label "Language" "语言"))
                      (:div :title "See Version" :class "dropdown dropdown-end"
                            (dui:dropdown/css-focus "dropdown"
                                (:div :tabindex "0" :role "button" :class "link link-hover inline-block font-mono text-xs" "Version")
                              (:ul :tabindex "0" :class "dropdown-content menu menu-sm bg-base-200 rounded-box mt-7 w-36 border border-white/5 p-2 shadow-2xl outline outline-1 outline-black/5"
                                   (:li (:a :href "/changelog/" "Changelog"))
                                   (:li) ; empty <li> has not styled yet
                                   (:li (:a :target "_blank" :rel "noopener, noreferrer" :href "/ver/3" "Version 3.x"))
                                   (:li (:a :target "_blank" :rel "noopener, noreferrer" :href "/ver/2" "Version 2.x"))
                                   (:li)
                                   (:li (:a :target "_blank" :rel "noopener, noreferrer" :href "/Roadmap" "Roadmap"))))))
                ;; more right components below
                ))))


(defun define-menu ()
  (spinneret:with-html
    (:ul :class "menu px-4 py-0"
         (:li)

         (:li (:details :id "disclosure-components" :open t ; t打开, nil关闭
                        (:summary :class "group" (:span "🕮") "Components")
                        (:ul (:li (:h2 :class "menu-title flex items-center gap-4 px-1.5"
                                       (:span :class "text-base-content" "⚝") "Actions")
                                  (:ul (:li (:div :class "group" :hx-get "/actions/button" :hx-trigger "click, load"
                                                  :hx-target "#content-div" :hx-swap "innerHTML" (:span "Button")))
                                       (:li (:div :class "group" :hx-get "/actions/dropdown" :hx-trigger "click"
                                                  :hx-target "#content-div" :hx-swap "innerHTML" (:span "Dropdown")))
                                       (:li (dui:htmx "/actions/modal" "click" "#content-div" "innerHTML" (:span "Modal")
                                                      :class "group"))
                                       (:li (dui:htmx "/actions/swap" "click" "#content-div" "innerHTML" (:span "Swap")
                                                      :class "group"))
                                       ))
                             (:li (:h2 :class "menu-title flex items-center gap-4 px-1.5"
                                       (:span :class "text-base-content" "⚝") "Data display")
                                  (:ul
                                   (:li (dui:htmx "/data-display/accordion" "click" "#content-div" "innerHTML" (:span "Accordion")
                                                  :class "group"))
                                   (:li (dui:htmx "/data-display/avatar" "click" "#content-div" "innerHTML" (:span "Avatar")
                                                  :class "group"))
                                   (:li (dui:htmx "/data-display/badge" "click" "#content-div" "innerHTML" (:span "Badge")
                                                  :class "group"))
                                   (:li (dui:htmx "/data-display/card" "click" "#content-div" "innerHTML" (:span "Card")
                                                  :class "group"))
                                   (:li (dui:htmx "/data-display/carousal" "click" "#content-div" "innerHTML" (:span "Carousal")
                                                  :class "group"))
                                   (:li (dui:htmx "/data-display/kbd" "click" "#content-div" "innerHTML" (:span "Kbd")
                                                  :class "group"))
                                   ))
                             (:li (:h2 :class "menu-title flex items-center gap-4 px-1.5"
                                       (:span :class "text-base-content" "⚝") "Navigation")
                                  (:ul (:li (dui:htmx "/navigation/breadcrumbs" "click" "#content-div" "innerHTML" (:span "Breadcrumbs")
                                                      :class "group"))
                                       (:li (dui:htmx "/navigation/bottom-navigation" "click" "#content-div" "innerHTML" (:span "Bottom Navigation")
                                                      :class "group"))
                                       (:li (dui:htmx "/navigation/link" "click" "#content-div" "innerHTML" (:span "Link")
                                                      :class "group"))
                                       (:li (dui:htmx "/navigation/menu" "click" "#content-div" "innerHTML" (:span "Menu")
                                                      :class "group"))
                                       (:li (dui:htmx "/navigation/navbar" "click" "#content-div" "innerHTML" (:span "Navbar")
                                                      :class "group"))
                                       (:li (dui:htmx "/navigation/tab" "click" "#content-div" "innerHTML" (:span "Tab")
                                                      :class "group"))
                                       ))
                             (:li (:h2 :class "menu-title flex items-center gap-4 px-1.5"
                                       (:span :class "text-base-content" "⚝") "Feedback")
                                  (:ul (:li (dui:htmx "/feedback/alert" "click" "#content-div" "innerHTML" (:span "Alert")
                                                      :class "group"))
                                       (:li (dui:htmx "/feedback/loading" "click" "#content-div" "innerHTML" (:span "Loading")
                                                      :class "group"))
                                       (:li (dui:htmx "/feedback/progress" "click" "#content-div" "innerHTML" (:span "Progress")
                                                      :class "group"))
                                       (:li (dui:htmx "/feedback/radial-progress" "click" "#content-div" "innerHTML" (:span "Radial progress")
                                                      :class "group"))
                                       (:li (dui:htmx "/feedback/tooltip" "click" "#content-div" "innerHTML" (:span "Tooltip")
                                                      :class "group"))
                                       ))
                             (:li (:h2 :class "menu-title flex items-center gap-4 px-1.5"
                                       (:span :class "text-base-content" "⚝") "Data input")
                                  (:ul (:li (dui:htmx "/data-input/checkbox" "click" "#content-div" "innerHTML" (:span "Checkbox")
                                                      :class "group"))
                                       (:li (dui:htmx "/data-input/file-input" "click" "#content-div" "innerHTML" (:span "File input")
                                                      :class "group"))
                                       (:li (dui:htmx "/data-input/radio" "click" "#content-div" "innerHTML" (:span "Radio")
                                                      :class "group"))
                                       (:li (dui:htmx "/data-input/select" "click" "#content-div" "innerHTML" (:span "Select")
                                                      :class "group"))
                                       (:li (dui:htmx "/data-input/input" "click" "#content-div" "innerHTML" (:span "Text input")
                                                      :class "group"))
                                       (:li (dui:htmx "/data-input/textarea" "click" "#content-div" "innerHTML" (:span "Textarea")
                                                      :class "group"))
                                       (:li (dui:htmx "/data-input/toggle" "click" "#content-div" "innerHTML" (:span "Toggle")
                                                      :class "group"))
                                       ))
                             (:li (:h2 :class "menu-title flex items-center gap-4 px-1.5"
                                       (:span :class "text-base-content" "⚝") "Layout")
                                  (:ul (:li (dui:htmx "/layout/artboard" "click" "#content-div" "innerHTML" (:span "Artboard")
                                                      :class "group"))
                                       (:li (dui:htmx "/layout/divider" "click" "#content-div" "innerHTML" (:span "Divider")
                                                      :class "group"))
                                       (:li (dui:htmx "/layout/drawer" "click" "#content-div" "innerHTML" (:span "Drawer")
                                                      :class "group"))
                                       (:li (dui:htmx "/layout/footer" "click" "#content-div" "innerHTML" (:span "Footer")
                                                      :class "group"))
                                       (:li (dui:htmx "/layout/hero" "click" "#content-div" "innerHTML" (:span "Hero")
                                                      :class "group"))
                                       (:li (dui:htmx "/layout/indicator" "click" "#content-div" "innerHTML" (:span "Indicator")
                                                      :class "group"))
                                       (:li (dui:htmx "/layout/joint" "click" "#content-div" "innerHTML" (:span "Joint")
                                                      :class "group"))
                                       (:li (dui:htmx "/layout/mask" "click" "#content-div" "innerHTML" (:span "Mask")
                                                      :class "group"))
                                       (:li (dui:htmx "/layout/stack" "click" "#content-div" "innerHTML" (:span "Stack")
                                                      :class "group"))
                                       ))


                             )))
         ;; add divide line
         (:li :style "--tw-bg-opacity: 1; background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity))); opacity: .1; margin: .5rem 1rem; height: 1px;")
         )))

(defun define-page ()
  (spinneret:with-html-string
    (:doctype)
    ;; https://daisyui.com/docs/themes/
    (:html :lang "zh-CN" :data-theme "corporate" :style "scroll-padding-top: 5rem; scroll-behavior: smooth;"
           (:head
            (define-header))
           (:body
            (:div
             (:div :class "bg-base-100 drawer lg:drawer-open"
                   (:input :id "drawer" :type "checkbox" :class "drawer-toggle")
                   ;; right column
                   (:div :class "drawer-content"
                         ;; right navbar in the right top
                         (define-right-navbar)
                         ;; right contents
                         (:div :class "max-w-[100vw] px-6 pb-16 xl:pr-2"
                               (:div :class "flex flex-col-reverse justify-between gap-6 xl:flex-row"
                                     (:div :id "content-div" :class "prose prose-sm max-w-none md:prose-base w-full max-w-4xl flex-grow pt-10"
                                           ;;(:h1 "Examples of common lisp with daisyUI")
                                           ;;(action-examples:define-button-example)
                                           ;;(define-action-examples)
                                           ;;(define-data-display-examples)
                                           )))
                         )
                   ;; left column
                   (:div :class "drawer-side z-40" :style "scroll-behavior: smooth; scroll-padding-top: 5rem;"
                         (:label :for "drawer" :class "drawer-overlay" :aria-label "Close menu")
                         (:aside :class "bg-base-100 min-h-screen w-80"
                                 ;; left navbar in the lefttop
                                 (:div :class "bg-base-100 sticky top-0 z-20 hidden items-center gap-2 bg-opacity-90 px-4 py-2 backdrop-blur lg:flex"
                                       (:a :href "/" :aria-current "page" :aria-label "Homepage" :class "flex-0 btn btn-ghost px-2"
                                           (:div :class "font-title inline-flex text-lg md:text-2xl" "CL daisyUI"))
                                       ;; add another here
                                       )
                                 (:div :class "h-4")
                                 (define-menu)
                                 )) ; finish left column
                   ))))))


(easy-routes:defroute page-index ("/components" :method :get) ()
  "Return a web page with a list of project tables related with the project id and the session user."
  (define-page))
